<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>热门话题</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .hottopic-header {
        padding:0.22rem 0.32rem 0.26rem;  
        font-family: PingFangSC-Medium;
        font-size: 0.32rem;
        color: #222222;
        letter-spacing: 0;
        text-align: center;
        /* position: relative; */
        background-color: #fff;
        /* margin-bottom: 0.14rem; */
        position: fixed;
        top: 0;
        z-index: 1;
        width: 100%;
      }
      .hottopic-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .addtopicicon {
        position: absolute;
        right: 0.32rem;
        top: 50%;
        transform: translateY(-50%);
      }
      .addtopicicon ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .addtopicicon ul li {
        display: inline-block;
        width: 0.04rem;
        height: 0.04rem;
        background: rgba(0,0,0,0.90);
        border-radius: 50%;
        vertical-align: middle;
      }
      .hottopic-list {
        padding-top: 0.9rem;
      }
      .hottopic-list ul {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      .hottopic-list ul li {
          background-color: #fff;
          padding: 0.44rem 0.32rem 0.3rem 0.34rem;
          /* margin-bottom: 0.14rem; */
          position: relative;
      }
      .hottopic-list ul li::after{
        content: '';
        width: 100%;
        height: 0.14rem;
        background: #f7f7f7;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .hottopic-list ul li .list-number {
        position: absolute;
        left: 0;
        top: 0;
        width: 0.32rem;
        height: 0.36rem;
        background: #B3B3B3;
        color: #fff;
        border-radius: 0 0 8px 0;
        font-family: PingFangSC-Medium;
        font-size: 0.28rem;
        letter-spacing: 0;
        text-align: center;
        line-height:0.36rem;
      }
      .hottopic-list ul li:nth-child(1) .list-number{
        background-image: linear-gradient(-84deg, #FF8872 0%, #FA0849 100%);
      }
      .hottopic-list ul li:nth-child(2) .list-number{
        background-image: linear-gradient(90deg, #FE6747 0%, #FFB543 97%);
        }
    .hottopic-list ul li:nth-child(3) .list-number{
        background-image: linear-gradient(84deg, #FFA716 5%, #FFC248 95%);
    }
      .hottopic-list ul li .title{
        font-family: PingFangSC-Medium;
        font-size: 0.3rem;
        color: #222222;
        line-height: 0.42rem;
        margin-bottom: 0.2rem;
      }
      .hottopic-list ul li .title img {
          width: 0.32rem;
          height: 0.32rem;
          margin-right: 0.12rem;
          vertical-align: middle;
      }
      .hottopic-list ul li .subtitle{
        font-family: PingFangSC-Regular;
        font-size: 0.26rem;
        color: #4D5465;
        letter-spacing: 0;
        text-align: left;
        line-height: 0.4rem;
        margin-bottom: 0.22rem;
        text-overflow: -o-ellipsis-lastline;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 5;  
        -webkit-box-orient: vertical; 
      }
      .hottopic-list ul li .elsetext {
        height: 0.34rem;
        line-height: 0.34rem;
        position: relative;
      }
      .elsetext-left {
          position: absolute;
          left: 0;
      }
      .elsetext-left-imgbox {
          position: relative;
      }
      .elsetext-left-imgbox .imgdiv{
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 50%;
        position: absolute;
      }
      .elsetext-left-imgbox .imgdiv img{
        width: 0.32rem;
        height: 0.32rem;
      }
      .elsetext-left-imgbox .imgdiv:nth-child(1){
          left: 0;
          /* background: pink; */
      }
      .elsetext-left-imgbox .imgdiv:nth-child(2){
          left: 0.26rem;
          /* background: blue; */
      }
      .elsetext-left-imgbox .imgdiv:nth-child(3){
          left: 0.52rem;
          /* background: green; */
      }
      .elsetext-left span {
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: rgba(34,34,34,0.45);
        letter-spacing: 0;
        text-align: left;
        position: absolute;
        width: 2rem;
        left: 1.04rem;
      }
      .elsetext-right{
        position: absolute;
        right: 0;
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: rgba(34,34,34,0.45);
      }
      /* 模态框 */
      .modelBox {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;
        z-index: 2;
      }
      .oprateBox {
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #F5F5F5;
      }
      .adddiv {
        width: 100%;
        font-size: 0.36rem;
        background: #FFFFFF;
        border-radius: 0.16rem 0.16rem 0 0;
        text-align: center;
        line-height: 1.14rem;
        margin-bottom: 0.16rem;
        color: #4BA7F7;
      }
      .canceldiv {
        height: 1.14rem;
        padding: 0.32rem 0.24rem ;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 0.36rem;
        color: #3A3A3A;
        background: #fff;
      }
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
    <div class="hotTopicContentBox">
        <!--具体代码-->
        <!-- 头部 -->
        <div class="hottopic-header">
            <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()">
            <span>热门话题</span>
            <div class="addtopicicon" onclick='showAddTopicBox()'>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!-- 列表 -->
        <div class="hottopic-list">
            <ul>
                <!-- <li>
                    <div class="list-number">1</div>
                    <div class="title">
                        <img src="../../images/topic/话题 (1)备份.png" alt="">
                        <span>A股低开高走彰显任性</span>
                    </div>
                    <div class="subtitle">
                        <span>全线翻红！A股三大股指低开高走，午后集体翻红上涨！</span>
                    </div>
                    <div class="elsetext">
                        <div class="elsetext-left">
                            <div class="elsetext-left-imgbox">
                                <div class="imgdiv"><img src="" alt=""></div>
                                <div class="imgdiv"><img src="" alt=""></div>
                                <div class="imgdiv"><img src="" alt=""></div>
                            </div>
                            <span>912人已参加讨论</span>
                        </div>
                        <div class="elsetext-right">
                            <span>912人查看</span>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modelBox">
        <div class="oprateBox">
            <div class="adddiv" onclick="addtopic()">
                <span>新增话题</span>
            </div>
            <div class="canceldiv" onclick="cancelModelBox()">
                <span>取消</span>
            </div>
        </div>
    </div>
</div>

</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let token
  let pageNum = 1
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    $('.hottopic-list ul').empty()
    getList(params)
    //页面加载获取token用于判断是否可以评论或者点赞
    jsBridge.getData('token').then(res => {
      console.log(res)
      token = res
    })
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {

  }
  //获取列表
  function getList(params){
    // Server.InteractionDetails.getDetails({'funcCode':params.funcCode,'pageNum':'1','pageSize':'5'}).then(res => {
    Server.InteractionList.getDetails({'funcCode':'005004','pageNum':params.pageNum||pageNum,'pageSize':10}).then(res => {
      console.log(res)
      if(res.code === 0){
        let detail = res.list
            detail.map((item,index) => {
                let creatTime = item.issuerDttm*1000             
                let nowTime = +new Date().valueOf()
                let year = new Date(creatTime).getFullYear()
                let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
                let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
                let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
                let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
                if(nowTime - creatTime < 30*60*1000){
                  if(nowTime - creatTime < 1*60*1000){
                    item.issuerDttm = '1分钟前'
                  }
                  item.issuerDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
                }else if(nowTime - creatTime < 24*60*60*1000){
                    if(nowTime-creatTime < 60*60*1000){
                      item.issuerDttm = '1小时前'
                    }else {
                      item.issuerDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                    }
                }else if(nowTime - creatTime < 2*24*60*60*1000){
                  item.issuerDttm = '昨天'+hour+":"+minute
                }else{
                  item.issuerDttm = year+'-'+month+'-'+day+' '+hour+':'+minute
                }
            }) 

            detail.map((item,index) => {
              let li = 
                    `<li onclick="godetails('${item.infoId}')">
                        <div class="list-number" style="display:${pageNum ===1?'block':'none'}">${index+1}</div>
                        <div class="title">
                            <img src="../../images/allPic/huati.png" alt=""  style='vertical-align:middle;'>
                            <span style='vertical-align:middle;'>${item.mainTitle}</span>
                        </div>
                        <div class="subtitle">
                            <span>${item.interactionIntroduce}</span>
                        </div>
                        <div class="elsetext">
                            <div class="elsetext-left">
                                <div class="elsetext-left-imgbox">
                                    <div class="imgdiv"><img src="../../images/allPic/touxiang.png" alt=""></div>
                                    <div class="imgdiv"><img src="../../images/allPic/touxiang.png" alt=""></div>
                                    <div class="imgdiv"><img src="../../images/allPic/touxiang.png" alt=""></div>
                                </div>
                                <span>${item.participantsCnt}人已参加讨论</span>
                            </div>
                            <div class="elsetext-right">
                                <span>${item.readCnt}人查看</span>
                            </div>
                        </div>
                    </li>`
                      $('.hottopic-list ul').append(li)
            })
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  // 点击每一项进入详情页,不弹框isopencomment=0
  function godetails(params){
      jsBridge.openWindow('/html/topic/topicdetails.html?infoId='+params+'&isopencomment=0',{}, {noBar: false})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //点击新增出现新增模态框
  function showAddTopicBox(){
    $('.modelBox').show()
  }
  //点击取消消除模态框
  function cancelModelBox(){
    $('.modelBox').hide()
  }
  //跳转新增页面
  function addtopic(){
    if(token){
      jsBridge.openWindow('/html/topic/addtopic.html',{}, {noBar: false})
    }else{
      jsBridge.toast('暂未登录,请先登录...')
    }
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.hottopic-list ul').offset().top      
    let height = $('.hottopic-list ul').height()
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === scroll ){
      pageNum++
      getList({'pageNum':pageNum})
    }
  })
</script>
</html>